import React, { useCallback, useMemo, useState } from "react";
import { Button, Input, Progress, message } from "antd";
import { DeleteOutlined, PlayCircleOutlined, UploadOutlined } from "@ant-design/icons";
import type { GetProps } from 'antd';
import styles from "./styles.module.scss";
import { useFileApi } from "./Context";
import UploadAction from "./UploadAction";
import { Service } from "@/lib";

type SearchProps = GetProps<typeof Input.Search>;

const { Search } = Input;
const ToolBar = () => {
    const fileApi = useFileApi();
    const serviceApi = Service.useService();
    const [ onUploadStatus, setOnUploadStatus ] = useState({
        uploading: false,
        percent: 0
    });
    const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
        fileApi.search({
            ...fileApi.searchData,
            name: value
        });
    };
    const onUploadStatusChange = useCallback((status: string, sourceUrl?: string, file?: any) => {
        if(status === "uploading") {
            setOnUploadStatus({
                uploading: true,
                percent: 0
            });
      } else if(status === "progress") {
            setOnUploadStatus({
                uploading: true,
                percent: parseInt((file as any).percent)
            });
      } else if(status === "done") {
            setOnUploadStatus({
                uploading: false,
                percent: 0
            });
            fileApi.refresh();
      } else if(status === "error") {
            setOnUploadStatus({
                uploading: false,
                percent: 0
            });
      } else if(status === "removed") {
            fileApi.refresh();
      }
    }, []);
    const deleteProps = useMemo(() => {
        return fileApi.selectedList?.length > 0 ? {} : { disabled: true };
    }, [fileApi.selectedList]);

    const onDeleteFile = useCallback(() => {
        const deleteAction = (index: number) => {
            const fileId = fileApi.selectedList[index];
            serviceApi.send({
                endPoint: "files.fileStatus",
                uri: {
                    fileId
                }
            }).then(() => {
                // delete
                serviceApi.send({
                    endPoint: "files.delete",
                    data: {
                        fileId
                    }
                }).then(() => {
                    message.success("文件删除成功。");
                    fileApi.emit("onRefresh");
                }).catch((err) => {
                    message.error(err.message || "删除文件失败。");
                })
            }).catch((err) => {
                message.error(err.message || "检查文件状态失败。");
            })
        };
        deleteAction(0);
    }, [fileApi.selectedList]);

    return (<>
        <section className={styles.toolbar}>
            <Button.Group>
                <Button title="删除" onClick={onDeleteFile} {...deleteProps}><DeleteOutlined /><span>删除</span></Button>
            </Button.Group>
            <Button.Group>
                <UploadAction
                    onStatusChange={onUploadStatusChange}
                >
                    <Button>
                        <UploadOutlined />
                        <span>上传文件</span>
                    </Button>
                </UploadAction>
            </Button.Group>
            <Search placeholder="输入搜索文件名" onSearch={onSearch} style={{ width: 200 }} />
        </section>
        { onUploadStatus.uploading && <Progress percent={onUploadStatus.percent} size="small" status="active" style={{marginTop: -5}} /> }
    </>);
};

export default ToolBar;
